<head>

    <style>
        /* Basic Grey */
        .basic-grey {
            margin-left: auto;
            margin-right: auto;
{#            background: #f4f9ff;#}
            padding: 25px 15px 25px 10px;
            font: 12px Georgia, "Times New Roman", Times, serif;
            border: 1px solid #E4E4E4;
            box-shadow: 3px 3px 5px #0080c4;
            border-radius: 19px;
            color: #185697;
             background: -ms-linear-gradient(top, #008edf, #f4f9ff);
            background: -moz-linear-gradient(top,#008edf,#f4f9ff);
            background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#008edf), to(#f4f9ff));
            background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008edf), to(#f4f9ff));
            background: -webkit-linear-gradient(top, #008edf, #f4f9ff);
            background: -o-linear-gradient(top, #008edf, #f4f9ff);
        }
        .basic-grey h1 {
                font-size: 25px;
                padding: 15px 0px 10px 40px;
                display: block;
                border-bottom: 1px solid #E4E4E4;
                margin: -25px -16px 30px -10px;
                color: currentColor;
                border-radius: 15px 15px 0 0;
        }
        .basic-grey h1 > span {
            display: block;
            font-size: 11px;
        }
{#        .basic-grey label {#}
{#            display: inline-table;#}
{#            margin: 0px;#}
{#            width: 48%;#}
{#        }#}
        .basic-grey label > div {
            float: left;
            width: 20%;
            text-align: right;
            padding-right: 10px;
            margin-top: 10px;
        }
        .basic-grey .button {
             background: #0080c4;
            border: none;
            padding: 5px 10px 5px 10px;
            color: #FFF;
            box-shadow: 1px 1px 5px #B6B6B6;
            border-radius: 3px;
            text-shadow: 1px 1px 1px #9E3F3F;
            cursor: pointer;
            float: left;
            position: relative;
            left: 85%;
            top: -22px;
        }
        .bottom:hover {
            background-color: #e4e9FF;
            margin-left: 0px;
            padding: 10px 0px;
            border-radius: 30px;
            border: 1px solid;
        }
        .top ,.bottom{  width: 100%;  display: flex; padding: 5px }
        .bottom input{  width: 50px;  }
        .top input{  width: 13%;  }
        .top div{  width: 10%;  text-align: center;  }
        .bottom div{ text-align: center}
        .bottom div:nth-child(2), .bottom div:nth-child(8){width: 90px; }
        .bottom div:nth-child(4), .bottom div:nth-child(6){width: 80px; }
        .bottom div:nth-child(10), .bottom div:nth-child(12), .bottom div:nth-child(14){width: 100px; }
        .bottom h4{margin:0 10px;}
        .top{margin: -15px 0px 18px -5px;}
    </style>

</head>
<body>

<form action="" method="post" class="basic-grey">
     {% csrf_token %}
    <div>
        <h1>学生信息
            <span>学生添加个人信息和成绩.</span>
            <input type="submit" class="button" value="提交"/>
        </h1>
        <label class="top">
            <div>姓名 :</div>
            <input id="name" type="text" name="name" vrequired placeholder="请输入学生姓名"/>
            <div>学号 :</div>
            <input id="chuqin" type="number" name="xuehao" required placeholder="请输入学号"/>
            <div>电话：</div>
            <input  id="telnum" name="telnum" type="tel" required placeholder="请输入学生电话号码">
            <div>邮箱 :</div>
            <input id="email" type="email" name="email" required placeholder="请输入学生邮箱"/>
        </label>
    </div>
    <div style="height: 226px">
    <label class="bottom">
        <h4>语文</h4>
        <div>出勤率 :</div>
        <input id="chuqin1" type="number" value="100"  max="100" min="0" placeholder="100"/>
        <div>态度 :</div>
        <input id="taidu1" name="taidu1" type="number" value="100" placeholder="100"/>
        <div>作业 :</div>
        <input id="zuoye1" name="zuoye1" type="number" value="0" placeholder="0"/>
        <div>小测验:</div>
        <input id="ceyan1" name="ceyan1" type="number" value="0" placeholder="0"/>
        <div>单元考试:</div>
        <input id="danyuan1" name="danyuan1" type="number" value="0" placeholder="0"/>
        <div>期中考试 :</div>
        <input id="qizhong1" name="qizhong1" type="number" value="0" placeholder="0"/>
        <div>期末考试:</div>
        <input id="qimo1" name="qimo1" type="number" value="0" placeholder="0"/>
        <input hidden name="kecheng1"  value="语文"/>
    </label>
    <label class="bottom">
        <h4>数学</h4>
        <div>出勤率 :</div>
        <input id="chuqin2" name="chuqin2" type="number" value="100"  max="100" min="0" placeholder="100"/>
        <div>态度 :</div>
        <input id="taidu2" name="taidu2" type="number" value="100" max="100" min="0" placeholder="100"/>
        <div>作业 :</div>
        <input id="zuoye2" name="zuoye2" type="number" value="0" max="100" min="0" placeholder="0"/>
        <div>小测验:</div>
        <input id="ceyan2" name="ceyan2" type="number" max="100" min="0" value="0" placeholder="0"/>
        <div>单元考试:</div>
        <input id="danyuan2" name="danyuan2" type="number" max="100" min="0" value="0" placeholder="0"/>
        <div>期中考试 :</div>
        <input id="qizhong2" name="qizhong2" type="number" max="100" min="0" value="0" placeholder="0"/>
        <div>期末考试:</div>
        <input id="qimo2" name="qimo2" type="number" value="0" max="100" min="0" placeholder="0"/>
        <input hidden name="kecheng2"  value="数学"/>
    </label>
    <label class="bottom">
        <h4>外语</h4>
        <div>出勤率 :</div>
        <input id="chuqin3" name="chuqin3" type="number" value="100"  max="100" min="0" placeholder="100"/>
        <div>态度 :</div>
        <input id="taidu3" name="taidu3" type="number" value="100" max="100" min="0" placeholder="100"/>
        <div>作业 :</div>
        <input id="zuoye3" name="zuoye3" type="number" value="0" max="100" min="0" placeholder="0"/>
        <div>小测验:</div>
        <input id="ceyan3" name="ceyan3" type="number" max="100" min="0" value="0" placeholder="0"/>
        <div>单元考试:</div>
        <input id="danyuan3" name="danyuan3" type="number" max="100" min="0" value="0" placeholder="0"/>
        <div>期中考试 :</div>
        <input id="qizhong3" name="qizhong3" type="number" max="100" min="0" value="0" placeholder="0"/>
        <div>期末考试:</div>
        <input id="qimo3" name="qimo3" type="number" value="0" max="100" min="0" placeholder="0"/>
        <input hidden name="kecheng3"  value="外语"/>
    </label>
    <label class="bottom">
        <h4>地理</h4>
        <div>出勤率 :</div>
        <input id="chuqin4" name="chuqin4" type="number" value="100"  max="100" min="0" placeholder="100"/>
        <div>态度 :</div>
        <input id="taidu4" name="taidu4" type="number" value="100" max="100" min="0" placeholder="100"/>
        <div>作业 :</div>
        <input id="zuoye4" name="zuoye4" type="number" value="0" max="100" min="0" placeholder="0"/>
        <div>小测验:</div>
        <input id="ceyan4" name="ceyan4" type="number" max="100" min="0" value="0" placeholder="0"/>
        <div>单元考试:</div>
        <input id="danyuan4" name="danyuan4" type="number" max="100" min="0" value="0" placeholder="0"/>
        <div>期中考试 :</div>
        <input id="qizhong4" name="qizhong4" type="number" max="100" min="0" value="0" placeholder="0"/>
        <div>期末考试:</div>
        <input id="qimo4" name="qimo4" type="number" value="0" max="100" min="0" placeholder="0"/>
        <input hidden name="kecheng4"  value="地理"/>
    </label>
    <label class="bottom">
        <h4>历史</h4>
        <div>出勤率 :</div>
        <input id="chuqin5" name="chuqin5" type="number" value="100"  max="100" min="0" placeholder="100"/>
        <div>态度 :</div>
        <input id="taidu5" name="taidu5" type="number" value="100" max="100" min="0" placeholder="100"/>
        <div>作业 :</div>
        <input id="zuoye5" name="zuoye5" type="number" value="0" max="100" min="0" placeholder="0"/>
        <div>小测验:</div>
        <input id="ceyan5" name="ceyan5" type="number" max="100" min="0" value="0" placeholder="0"/>
        <div>单元考试:</div>
        <input id="danyuan5" name="danyuan5" type="number" max="100" min="0" value="0" placeholder="0"/>
        <div>期中考试 :</div>
        <input id="qizhong5" name="qizhong5" type="number" max="100" min="0" value="0" placeholder="0"/>
        <div>期末考试:</div>
        <input id="qimo5" name="qimo5" type="number" value="0" max="100" min="0" placeholder="0"/>
        <input hidden name="kecheng5"  value="历史"/>
    </label>
    <label class="bottom">
        <h4>物理</h4>
        <div>出勤率 :</div>
        <input id="chuqin6" name="chuqin6" type="number" value="100"  max="100" min="0" placeholder="100"/>
        <div>态度 :</div>
        <input id="taidu6" name="taidu6" type="number" value="100" max="100" min="0" placeholder="100"/>
        <div>作业 :</div>
        <input id="zuoye6" name="zuoye6" type="number" value="0" max="100" min="0" placeholder="0"/>
        <div>小测验:</div>
        <input id="ceyan6" name="ceyan6" type="number" max="100" min="0" value="0" placeholder="0"/>
        <div>单元考试:</div>
        <input id="danyuan6" name="danyuan6" type="number" max="100" min="0" value="0" placeholder="0"/>
        <div>期中考试 :</div>
        <input id="qizhong6" name="qizhong6" type="number" max="100" min="0" value="0" placeholder="0"/>
        <div>期末考试:</div>
        <input id="qimo6" name="qimo6" type="number" value="0" max="100" min="0" placeholder="0"/>
        <input hidden name="kecheng6"  value="物理"/>
    </label>
    <label class="bottom">
        <h4>政治</h4>
        <div>出勤率 :</div>
        <input id="chuqin7" name="chuqin7" type="number" value="100"  max="100" min="0" placeholder="100"/>
        <div>态度 :</div>
        <input id="taidu7" name="taidu7" type="number" value="100" max="100" min="0" placeholder="100"/>
        <div>作业 :</div>
        <input id="zuoye7" name="zuoye7" type="number" value="0" max="100" min="0" placeholder="0"/>
        <div>小测验:</div>
        <input id="ceyan7" name="ceyan7" type="number" max="100" min="0" value="0" placeholder="0"/>
        <div>单元考试:</div>
        <input id="danyuan7" name="danyuan7" type="number" max="100" min="0" value="0" placeholder="0"/>
        <div>期中考试 :</div>
        <input id="qizhong7" name="qizhong7" type="number" max="100" min="0" value="0" placeholder="0"/>
        <div>期末考试:</div>
        <input id="qimo7" name="qimo7" type="number" value="0" max="100" min="0" placeholder="0"/>
        <input hidden name="kecheng7"  value="政治"/>
    </label>
    </div>
</form>
<script>
     {% if msg == 1 %}
            alert("该学生用户已存在，添加成绩操作成功！")
     {% elif msg == 3 %}
           alert('未创建添加成绩操作失败！')
      {% elif msg == 6 %}
            alert("操作失败。错误码：0600！")
     {% elif msg == 7 %}
           alert('操作失败。错误码：0700！')
     {% elif msg == 8 %}
           alert('操作失败。错误码：0800！')
     {% endif %}
</script>
</body>